<template>
	<view class="content">
		<view v-for="(item,index) in detailInfo" :key="index">
			<view class="project-list">
				<view>区域：{{item.position_name}}</view>
				<view>商品名称：{{item.product_name}}</view>
				<view>型号：{{item.variant_model_number}}</view>
				<view>品牌：{{item.brand_name}}</view>
				<view>数量：{{item.product_qty}}件，已到货数量：{{item.received_qty}}件</view>
				<view :style="{color:item.delay==='2'?'red':''}">进场时间：{{item.request_order_date}}</view>
				<view class="project-operate">
					<button v-if="item.state_name!=''" size="mini" type="primary" @click="already(item.measurement_id,item.measurement_type,item.product_name,item.position_name,item.apply_distance)">编辑复尺</button>
					<button v-if="item.state_name==''" size="mini" type="primary" @click="addMeasure(item.product_name,item.product_id,item.measurement_type,item.hard_product_id,item.position_id,item.position_name,item.texture,item.apply_distance)">待复尺</button>
				</view>
				<image class="project-image" :src="item.imgurl" @error="imageError" @click="previewImage(item.imgurl)"></image>
			
				<text v-if="item.state_name!=''" class="customer-tpe">{{	item.state_name}}</text>
			</view>
		</view>
		<view v-if="noData" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text> 暂 无 数 据 . . . </text>
		</view>
	</view>
</template>

<script>
	import { measureType } from '@/common/stateData.js'
	export default {
		data() {
			return {
				showDrawer: false, //抽屉组件状态
				detailInfo: {}, //详情信息
				noData: false, //详情列表数据是否为空
				horizontal: 'left',
				vertical: 'bottom',
				project_id: null
			}
		},
		onLoad(param) {
			this.project_id = parseInt(param.project_id)
			this.goMetarialList(JSON.parse(param.line_ids), param.measurement_type)
			uni.setNavigationBarTitle({
				title: measureType[param.measurement_type]
			})
			this.$eventBus.$on('measureComplete', () => {
				this.goMetarialList(JSON.parse(param.line_ids), param.measurement_type)
			})
		},
		onUnload() {
			this.$eventBus.$off('measureComplete')
		},
		methods: {
			addMeasure(productname,productid,measurement_type,hard_product_id,position_id,position_name,texture,apply_distance) { // 到复尺页
				uni.navigateTo({
					url: './addMeasure?project_id=' + JSON.stringify(this.project_id)  +'&product_name=' + productname  + '&measurement_type=' + measurement_type  + '&product_id=' + JSON.stringify(productid)  + '&hard_product_id=' + JSON.stringify(hard_product_id)  + '&position_id=' + JSON.stringify(position_id)   + '&position_name=' + position_name   + '&texture=' + texture    + '&apply_distance=' +  apply_distance,
				})
			},
			already(measurement_id,measurement_type,productname,position_name,apply_distance){ // 状态是已复尺
				uni.navigateTo({
					url: './addMeasure?measurement_id=' + JSON.stringify(measurement_id)   + '&measurement_type=' + measurement_type   +'&product_name=' + productname  + '&position_name=' + position_name +'&apply_distance=' +  apply_distance  ,
				})
			},
			fadlongpress() { // 悬浮按钮长按
				if (this.vertical === 'top') {
					this.vertical = 'bottom'
				} else {
					this.vertical = 'top'
				}
			},
			//获取详情信息
			goMetarialList(line_ids, measurement_type) {
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/get_material_measurement_material_search',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						line_ids,
						measurement_type,
						project_id: this.project_id
					},
					success: res => {
						uni.hideLoading()
						if (res.data.code === 1) {
							this.detailInfo = res.data.data.info
							if (res.data.data.info.length === 0) {
								this.noData = true
							} else {
								this.noData = false
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//图片预览
			previewImage(url) {
				//有图片的时候才能让他弹出来
				if (url !== '') {
					const imgList = [url]
					uni.previewImage({
						// current: imgList[i],
						current: 0,
						urls: imgList
					})
				} else {
					uni.showToast({
						title: '暂无图片',
						mask: false,
						duration: 1500,
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.project-list {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 15rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		position: relative;

	}

	.title {
		background-color: #FFFFFF;
		text-align: center;
		position: relative;
	}

	.reminder {
		position: absolute;
		right: 0;
		line-height: 50upx;
		display: inline;
		margin-right: 5upx;
		background-color: #69a0f4;
		color: #FFFFFF;
		border-radius: 20upx;
		padding: 0 10upx;
		font-size: 28upx;
	}

	.project-image {
		position: absolute;
		right: 30upx;
		bottom: 100upx;
		width: 200px;
		height: 200px;
		background-color: #eeeeee;
	}
	.project-operate{
		padding-top: 30upx;
	}
    .project-operate button{
		margin-left: 20upx;
	}
	.customer-tpe {
	line-height:40upx;
	height:40upx;
	background-color:#f4f4f4;
	border-radius:6upx;
	color:#999999;
	padding: 3upx 8upx;
	}
</style>
